<template>
  <div>
    <div class="swripBox">
      <van-swipe :autoplay="3000" indicator-color="blue">
        <van-swipe-item v-for="(item, index) in lunboList" :key="index">
          <img v-lazy="item.swiperUrl"/>
        </van-swipe-item>
      </van-swipe>
    </div>
    <div class="listChoose">
      <ul>
        <li v-for="(item,index) in listChooseList" :key="index" @click="toTaskTypeList(item.menuCode,index)">
          <div class="lis">
            <img :src="item.menuIcon">
            <p>{{ item.menuName }}</p>
          </div>
        </li>
      </ul>
    </div>
    <div class="revealCon">
      <van-list
              v-model="loading"
              :finished="finished"
              finished-text="没有更多了"
              :immediate-check="false"
              @load="onLoad"
      >
      <router-link tag="div" :to="{path:'/assignmentDetail', query: {id:item.id}}" v-for="(item,index) in revealConList" :key="index"
                   class="revealConItem">
        <div class="revealConBg">
          <div class="revealConTop">
            <div class="photo">
              <img :src="item.menuIcon">
              <p>{{ item.taskType }}</p>
            </div>
            <div class="times">发布时间：{{ item.createTime }}</div>
            <div class="num">接单数：{{ item.needMan }}</div>
          </div>
          <div class="introduce">
<!--            <img :src="item.avatar">-->
            <div class="name">
              <img :src="item.avatar"  >
             <p> {{ item.nickName }}</p>
            </div>
            <div class="information">
              <p class="item1">{{ item.title }}</p>
              <span class="item2">{{ item.taskDemand }}</span>
              <div class="item3">新人可做：{{ item.newManDoAble }}</div>
              <div class="item4">
                <div>任务标签：</div>
                <ul>
                  <li v-for="(i,j) in item.taskTagsList" >{{ i }}</li>
                </ul>
              </div>
              <div class="item5">
                <div class="left">
                  <div class="principal">本金</div>
                  <p>￥{{ item.capital }}</p>
                </div>
                <div class="rit">
                  <div class="brokerage">佣金</div>
                  <p>￥{{ item.commission }}</p>
                </div>
              </div>
            </div>
          </div>
        </div>

      </router-link>
      </van-list>
    </div>

    <div style="height: 50px;width: 100%"></div>
    <!-- 底部导航栏-->
    <foot-nav></foot-nav>
  </div>
</template>
<script>
import navApi from '@/api/nav'
import comApi from '@/api/comapi'
import taskApi from '@/api/task'
import footNav from "../components/base/tabbar.vue"

export default {
  data() {
    return {
      loading: false,
      finished: false,
      count: 0,
      data: [],
      images: [
        require('../assets/img/photoimg.jpg'),
        require('../assets/img/my_bg.jpg'),
      ],
      lunboList: [],
      listChooseList: [],
      revealConList: [  ]
      ,
      page: {
        pageNo: 1,
        pageSize: 10
      },
    }
  },
  created() {
    this.navLoad();
    this.lunBoLoad()
    this.taskList()
  },
  methods: {
    lunBoLoad() {
      comApi.getLunboList().then(res => {
        this.lunboList = res.data.records
      })
    },
    toTaskTypeList(code,index){
      this.$router.push({path:'/assignment',query:{code:code,num:index}});
    },
    taskList(){
      taskApi.taskList(this.page).then(res=>{
        this.revealConList = res.data.records
      })
    },
    navLoad() {

      // if (window.localStorage) {
      //     let local = window.localStorage
      //     if (local.getItem("indexNavs")) {
      //         this.listChooseList = JSON.parse(local.getItem("indexNavs"))
      //         return
      //     }
      // }
      navApi.getIndexNav().then(res => {
        this.listChooseList = res.data.records
        // if (window.localStorage) {
        //     let local = window.localStorage
        //     local.setItem("indexNavs", JSON.stringify(res.data.records))
        // }
      })
    },
    onLoad() {
      this.page.pageNo += 1
      taskApi.taskList(this.page).then(res=>{
        console.log(res)
        var tal = res.data.pages
        this.revealConList = this.revealConList.concat(res.data.records)
        this.loading = false;
        if(tal == 1){
          this.page.pageNo = 1
        }
        if(this.page.pageNo == tal){
          this.finished = true;
          this.page.pageNo =0
        }

      })
    },
  },
  components: {
    footNav
  },

}
</script>
<style lang="less" scoped>
.swripBox {
  width: 100%;
  height: 200px;
  margin-bottom: 10px;
  padding-top: 10px;

  img {
    width: 100%;
    height: 200px;
  }

  /deep/ .van-swipe__indicator {
    background-color: white;
    opacity: 1;
  }
}

.listChoose {
  width: 100%;
  border-bottom: 10px solid #f8f8f8;

  ul {
    width: 95%;
    margin: 0 auto;
    display: flex;
    align-content: center;
    flex-wrap: wrap;

    li {
      width: 25%;

      .lis {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 5px 0;

        p {
          font-size: 14px;
        }

        img {
          width: 60px;
          height: 60px;
        }

      }
    }
  }
}

.revealCon {

  width: 100%;

  .revealConItem {
    width: 97%;
    margin: 0 auto;
    margin-bottom: 10px;
    border-radius: 5px;
    box-shadow: 3px 6px 10px 2px #e9e9e9;

    .revealConBg {
      padding: 10px;

      .revealConTop {
        display: flex;
        align-items: center;
        font-size: 12px;

        .photo {
          margin-right: 25px;
          display: flex;
          align-items: center;

          img {
            width: 30px;
            height: 30px;
            margin-right: 5px;
          }
        }

        .times {
          flex: 3;
        }

        .num {
          text-align: right;
        }
      }

      .introduce {
        padding: 20px 0 0 0;
        display: flex;
        align-items: center;

        .name {
          width: 150px;
          margin-right: 10px;
          display: flex;
          justify-content: center;
          align-items: center;
          flex-direction: column;

          img{
            width: 40px;
            height: 40px;
            border-radius: 50%;

          }
          p{
            width: 110px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            text-align: center;
          }
        }

        .information {
          width: 75%;

          .item1 {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }

          .item2 {
            display: inline-block;
            margin: 5px 0;
            font-size: 12px;
            color: #717171;
          }

          .item4 {
            display: flex;

            ul {
              display: flex;

              li {
                padding: 0px 5px;
                border-radius: 5px;
                border: 1px solid #f8f5be;
                margin-right: 5px;
              }
            }
          }

          .item5 {
            display: flex;

            .left {
              flex: 1;

              .principal {
                display: inline-block;
                /*width: 40px;*/
                padding: 3px 10px;
                border: 1px solid #fbef1a;
                border-radius: 15px;

              }

              p {
                color: #fbef1a;
              }
            }

            .rit {
              flex: 1;

              .brokerage {
                display: inline-block;
                padding: 3px 10px;
                border: 1px solid #fbef1a;
                border-radius: 15px;
              }

              p {
                color: #fbef1a;
              }
            }
          }
        }


      }

    }
  }
}
</style>
